<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
    <title>新增规格模板</title>
    <link href="js/jquery-confirm/jquery-confirm.min.css" th:href="@{/js/jquery-confirm/jquery-confirm.min.css}" rel="stylesheet">
    <link href="js/jquery-tagsinput/jquery.tagsinput.min.css" th:href="@{/js/jquery-tagsinput/jquery.tagsinput.min.css}" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">新增规格</div></header>
                <div class="card-body">
                    <form class="form-horizontal" id="form" action="#" method="post" enctype="multipart/form-data" onsubmit="return false;">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">商品类目</label>
                            <div class="col-sm-10">
                                <input type="hidden" name="cid" class="cid">
                                <button class="btn btn-label btn-primary goodsCat"><label><i class="mdi mdi-file-document-box-search"></i></label> 选择类目</button>
                                <span class="badge badge-pill badge-secondary charin"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="group" class="col-sm-2 col-form-label">规格参数</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="group" name="group" autocomplete="off" placeholder="请输入分组名">
                            </div>
                            <div class="col-sm-2">
                                <button type="button" onclick="addGroup()" class="btn btn-cyan">添加分组</button>
                            </div>
                        </div>
                        <div id="paramDiv"></div>

                        <div class="form-group row">
                            <div class="col-sm-12">
                                <button type="button" onclick="submitForm()" class="btn btn-primary">提交</button>
                                <button type="reset"  onclick="resetParam()" class="btn btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/common_foot :: foot"></div>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js" th:src="@{/js/jquery-confirm/jquery-confirm.min.js}"></script>
<script type="text/javascript" th:src="@{/js/summernote/summernote.js}"></script>
<script type="text/javascript" th:src="@{/js/summernote/summernote-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-tagsinput/jquery.tagsinput.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
<script type="text/javascript">

    function alertTip(msg){
        $.alert({
            title: '错误提示',
            icon: 'mdi mdi-alert',
            type: 'orange',
            content: msg,
        });
    }

    function checkGroup(){
        var group = $(".param")
        if (group.length === 0){
            return false;
        }
        return true;
    }

    function addGroup(){
        var group = $("#group").val()
        if (group.trim().length === 0){
            alertTip("請輸入分组名")
            return ;
        }

        var html = `<div class="form-group row param">
                                <div class="d-inline col-sm-2 p-2 bg-primary text-white">${group}</div>
                                <div class="col-sm-7">
                                    <input class="form-control js-tags-input" type="text"  name="tags" data-height="40px" placeholder="请输入规格名" >
                                </div>
                                <a href="#" style="color: red" class="btn btn-danger mdi mdi-delete" onclick="removeParam(this)" title="刪除"></a>
                            </div>`

        $("#paramDiv").append(html)
        $("#group").val('')
        $('.js-tags-input').each(function() {
            var $this = $(this);
            $this.tagsInput({
                height: $this.data('height') ? $this.data('height') : '36px',
                width: '100%',
                defaultText: $this.attr("placeholder"),
                removeWithBackspace: true,
                delimiter: [',']
            });
        });
    }

    function removeParam(ele){
        var p = $(ele).parent()
        p.remove()
    }

    function submitForm(){

        var cid = $(".cid").val()
        if (!cid){
            $.alert({
                title: '错误提示',
                icon: 'mdi mdi-alert',
                type: 'orange',
                content: '請選擇商品類目',
            });
            return ;
        }

        var f = checkGroup()
        if (!f){
            alertTip("请添加分组")
            return ;
        }
        var arr = []

        var param = $(".param")
        if (param.length === 0){
            alertTip("请为分组添加规格")
            return
        }

        var flag = true
        $.each(param,function(i,e){
            var item = {}

            var group = $(e).find(".d-inline").text()
            var val = $(e).find("input[name='tags']").val()
            if (val.trim().length === 0){
                alertTip("请补全规格！")
                flag = false
                return false
            }
            item.group = group.trim()
            item.params = val.split(",")
            arr.push(item)
        })

        if (!flag){
            return
        }

        var data = {}
        data.itemCatId = cid
        data.paramData = JSON.stringify(arr)
        console.log(data)
        var l = $('body').lyearloading({
            opacity: 0.6,
            backgroundColor: '#ffffff',
            imgUrl: '/images/loader.gif',
            spinnerText: '后台处理中，请稍后...',
            textColorClass: 'text-info'
        });

        $.ajax({
            data:data,
            type:"post",
            url:"/itemParam/addParam",
            success:function (res){
                l.destroy();
                if (res.code === 0){
                    //上传成功
                    alert("添加成功")
                }
                else{
                    alert(res.data)
                }
            },
            error:function (res){
                alert("上传失败")
            }
        })
    }

    function resetParam(){
        $(".cid").val('')
        $(".charin").text("")
    }

    /**
     * 后续修改为layer
     */
    $(".goodsCat").click(function (res){
        layer.open({
            type: 2,
            title: '选择商品类目',
            shadeClose: true,
            shade: 0.5,
            area: ['500px', '70%'],
            btn: ['选择', '关闭'],
            yes: function(index, layero){
                var body = layer.getChildFrame('body',index);//建立父子联系【核心】
                var iframeWin = window[layero.find('iframe')[0]['name']];//【核心】
                var v = iframeWin.get();    //调用子页面的方法
                if (v == null){
                    layer.msg("请选择叶子节点")
                    return ;
                }
                var parse = JSON.parse(v);
                $(".charin").text(parse.catCharinName)
                $(".cid").val(parse.cid)
                layer.close(index);
                sessionStorage.removeItem("select")
            },
            content: '/goods/itemCat' //iframe的url
        });
    })

</script>
</body>
</html>